<template>
  <view class="content">
    <tabbar current="1"></tabbar>
    <view class="headerBox">
      <view class="title">
        速推单
      </view>
      <view class="screenBox">
        <view class="city" @tap="showCityTwo">
          {{city}}
          <image class="arrow-down" src="../../static/img/arrow-down.png" mode=""></image>
        </view>
        <view class="creen" @tap="screenShow = true">
          筛选
          <image class="arrow-down" src="../../static/img/arrow-down.png" mode=""></image>
        </view>
        <view class="ipt" @tap="goSearch">
          <!--  <view class="">
            搜索内容
          </view> -->
          <input type="text" placeholder="搜索内容" v-model="queryInfo.search_data"
            placeholder-style="color: rgba(0,0,0,0.4);">
          <image src="../../static/img/magnifier.png" mode="" @tap="getIndex"></image>
        </view>
      </view>
    </view>
    <view v-if="loadingShow">
      <u-loading-icon text="加载中"></u-loading-icon>
    </view>
    <view class="list">
      <view class="item" @tap="goDetail(item.id)" v-for="(item,index) in list" :key="index">
        <view class="" style="width: 92rpx;height: 36rpx;" v-if="item.join_state == '1'">
          <image v-if="item.join_state == '1'" class="stateImg" src="../../static/img/Slice 75.png" mode=""></image>
        </view>
        <view class="itemContent">
          <view class="title">
            <view class="name" style="font-weight: 550;">
              {{item.dy_nickname}}
              <image src="../../static/img/man.png" mode=""></image>
            </view>
            <view class="btns">
              <view class="btn" v-if="item.join_state == 1">
                已邀约
              </view>
              <view class="btn" v-if="item.join_state == 0" @tap.stop="get_invite_order_list(item.id)">
                邀约
              </view>
              <view class="frame">
                <button class="btnNone" style="display: flex;align-items: top;" open-type="share" catchtap="share">
                  <image src="../../static/img/Frame.png" mode=""></image>
                </button>
              </view>
            </view>
          </view>
          <view class="bottomBox">
            <view class="avatar">
              <image src="../../static/img/Slice 40.png" mode=""></image>
            </view>
            <view class="userId">
              抖音ID:{{item.dy_id}}
              <image class="copyImg" src="../../static/img/copy.png" mode="" @tap.stop="copy(item.dy_id)"></image>
            </view>
            <view class="">
            </view>
          </view>
          <view class="lableBoxS">
            <view style="background-color: #DDE3F9;">
              {{item.city}}{{item.area}}
            </view>
            <view style="background-color: #FFDFC1;" v-for="(item1,index1) in item.category_data">
              {{item1}}
            </view>
            <!-- <view style="background-color: #CAE5BD;">
    							素材直播
    						</view> -->
          </view>
          <view class="numbers">
            <view class="numberBox">
              <view class="lable">
                粉丝
              </view>
              <view class="num">
                {{item.fans_num}}
              </view>
            </view>
            <view class="numberBox" style="text-align: center;">
              <view class="lable">
                内容力等级
              </view>
              <view class="num golden">
                Lv{{item.sales_level}}
              </view>
            </view>
            <view class="numberBox" style="text-align: right;">
              <view class="lable">
                带货力等级
              </view>
              <view class="num golden">
                Lv{{item.content_level}}
              </view>
            </view>
          </view>
        </view>
      </view>

    </view>
    <!-- 创建按钮 -->
    <image class="addBtnImg" src="../../static/img/add.png" mode="" @tap="goAdd()"></image>

    <!-- 报名弹框 -->
    <u-popup class="applicationBox" :show="applicationShow" @close="close" @open="open" :round="10">
      <view class="applicationContent">
        <view class="title">
          {{dy_nickname}}的达人名片
        </view>
        <u--form labelPosition="left" :model="form" ref="formRef" labelWidth="196rpx" :labelStyle="labelStyle">
          <u-form-item prop="oldpwd" label="时间" borderBottom>
            <view style="display: flex;" @tap="addTime">
              <span style="flex: 1;text-align: right;">{{timeValue}}</span>
              <image style="margin: 0 0 0 18rpx;" src="../../static/img/add1.png" mode=""></image>
            </view>
          </u-form-item>
          <u-form-item prop="oldpwd" label="门店" borderBottom>
            <view style="display: flex;" @tap="goShopAddress">
              <span style="flex: 1;text-align: right;">{{shopAddressValue}}</span>
              <image style="margin: 0 0 0 18rpx;" src="../../static/img/add1.png" mode=""></image>
            </view>
          </u-form-item>
          <u-form-item prop="oldpwd" label="报名带货力等级" borderBottom>
            <view style="display: flex;" @tap="addGrade">
              <span style="flex: 1;text-align: right;">{{gradeValue}}</span>
              <image style="margin: 0 0 0 18rpx;" src="../../static/img/add1.png" mode=""></image>
            </view>

          </u-form-item>
          <u-form-item prop="oldpwd" label="到店人数" borderBottom>
            <u-input placeholder="请输入" inputAlign='right' :type="oldpwdType" v-model="confirm_join_info.num"
              border="none">
            </u-input>
          </u-form-item>
          <u-form-item prop="oldpwd" label="备注" borderBottom>
            <u-input placeholder="请输入" inputAlign='right' :type="oldpwdType" v-model="confirm_join_info.remark"
              border="none">
            </u-input>
          </u-form-item>
        </u--form>

        <view class="applicationBtns">
          <view class="qxBtn" @tap="cancelApplication">
            取消报名
          </view>
          <view class="qrBtn" @tap="application">
            确认报名
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 时间弹框 -->
    <u-datetime-picker confirmColor="#7D81A9" @cancel="timeCancel" @confirm="confirmTime" :show="timeShow"
      v-model="confirm_join_info.time" mode="datetime"></u-datetime-picker>

    <!-- 带货力等级弹框 -->
    <u-picker :show="gradeShow" confirmColor="#7D81A9" @cancel="gradeCancel" @confirm="confirmGrade"
      :columns="grade"></u-picker>

    <!-- 筛选 -->
    <u-popup :show="screenShow" @open="screenOpen" mode="top" :safeAreaInsetTop="true" width="100%">
      <view class="screenContent " style="height: 100vh; padding:16rpx 30rpx 100rpx 30rpx;">
        <u-icon name="close" size="24" @click="screenClose"></u-icon>
        <view class="itemBox margin-top-lg">
          <view class="title">
            粉丝量
          </view>
          <view class="itemListBox">
            <view class="item itemBaoChou" :class="{active : item.flag}" v-for="(item,i) in fans" :key="i"
              @tap="screenBtn(item)">
              {{item.name}}
            </view>
          </view>
        </view>
        <view class="itemBox">
          <view class="title">
            带货力等级
          </view>
          <view class="itemListBox">
            <view class="item" :class="{active : item.flag}" v-for="(item,i) in dh" :key="i" @tap="screenBtn(item,1)">
              {{item.name}}
            </view>
          </view>

        </view>
        <view class="itemBox">
          <view class="title">
            内容力等级
          </view>
          <view class="itemListBox">
            <view class="item" :class="{active : item.flag}" v-for="(item,i) in nr" :key="i" @tap="screenBtn(item,2)">
              {{item.name}}
            </view>
          </view>
        </view>
        <view class="itemBox">
          <view class="title">
            达人品类
          </view>
          <view class="itemListBox">
            <view class="item" :class="{active : item.flag}" v-for="(item,i) in category_data" :key="i"
              @tap="screenBtn(item)">
              {{item.category_name}}
            </view>
          </view>

        </view>
        <view class="itemBox">
          <view class="title">
            内容形式
          </view>
          <view class="itemListBox">
            <view class="item" :class="{active : item.flag}" v-for="(item,i) in content_data" :key="i"
              @tap="screenBtn(item,3)">
              {{item.content_type_name}}
            </view>
          </view>

        </view>
        <view class="itemBox">
          <view class="title">
            性别
          </view>
          <view class="itemListBox">
            <view class="item" :class="{active : item.flag}" v-for="(item,i) in gender" :key="i"
              @tap="screenBtn(item,4)">
              {{item.name}}
            </view>
          </view>
        </view>
        <view class="itemBox">
          <view class="title">
            邀约状态
          </view>
          <view class="itemListBox">
            <view class="item" :class="{active : item.flag}" v-for="(item,i) in zt" :key="i" @tap="screenBtn(item,5)">
              {{item.name}}
            </view>
          </view>
        </view>
        <view class="screenBtns">
          <view class="btn" @tap="resetting">
            重置
          </view>
          <view class="btn" style="background: #7D81A9;color: #fff;margin-right: 0;" @tap="confirmFilter">
            确认
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 省市二级选择器 -->
    <mpvue-city-picker1 ref="mpvueCityPickerTwo" :pickerValueDefault="pickerValueDefault"
      @onConfirm="onConfirmTwo"></mpvue-city-picker1>

    <!-- 达人名片的弹框 -->
    <u-popup class="collectPopup" bgColor="#F2F3F6" :show="collectShow" :round="10" closeable
      @close="collectShow = false" @open="open">
      <view class="cardlist">
        <view class="item">
          <view class="itemContent">
            <view class="belong">
              我的达人名片
            </view>
            <view class="title">
              <view class="name">
                {{my_card.dy_nickname}}
                <image src="../../static/img/man.png" mode=""></image>
              </view>
              <view class="btns">
                <view class="btn" v-if="my_card.join_state == 0" @tap="cardBtn(my_card.id,my_card.dy_nickname)">
                  报名
                </view>
                <view class="btn" v-if="my_card.join_state == 1">
                  报名成功
                </view>
                <view class="frame">
                  <image src="../../static/img/Frame.png" mode=""></image>
                </view>
              </view>
            </view>
            <view class="userBox">
              <view class="avatar">
                <image src="../../static/img/Slice 40.png" mode=""></image>
              </view>
              <view class="userId">
                抖音ID:{{my_card.dy_id}}
                <image class="copyImg" src="../../static/img/copy.png" mode=""></image>
              </view>
              <view class="">

              </view>
            </view>
            <view class="lableBoxS">
              <view style="background: rgba(221,227,249,0.6);">
                {{my_card.province}}{{my_card.city}}
              </view>
              <view style="background: rgba(202,229,189,0.6);" v-for="(item,i) in my_card.category_data" :key="i">
                {{item}}
              </view>
            </view>
            <view class="numbers">
              <view class="numberBox">
                <view class="lable">
                  粉丝
                </view>
                <view class="num">
                  {{my_card.fans_num}}
                </view>
              </view>
              <view class="numberBox" style="text-align: center;">
                <view class="lable">
                  内容力等级
                </view>
                <view class="num golden">
                  Lv{{my_card.content_level}}
                </view>
              </view>
              <view class="numberBox" style="text-align: right;">
                <view class="lable">
                  带货力等级
                </view>
                <view class="num golden">
                  Lv{{my_card.sales_level}}
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 第二个 -->
        <view class="item" v-for="(item,i) in receive_card" :key="i">
          <view class="itemContent">
            <view class="belong">
              认领的达人名片
            </view>
            <view class="title">
              <view class="name">
                {{item.anchor_card.dy_nickname}}
                <image src="../../static/img/man.png" mode=""></image>
              </view>
              <view class="btns">
                <view class="btn" v-if="item.anchor_card.join_state == 0" @tap="cardBtn(item.card_id,item.dy_nickname)">
                  报名
                </view>
                <view class="btn" v-if="item.anchor_card.join_state == 1">
                  报名成功
                </view>

                <view class="frame">
                  <image src="../../static/img/Frame.png" mode=""></image>
                </view>
              </view>
            </view>
            <view class="userBox">
              <view class="avatar">
                <image src="../../static/img/Slice 40.png" mode=""></image>
              </view>
              <view class="userId">
                抖音ID: {{item.anchor_card.dy_id}}
                <image class="copyImg" src="../../static/img/copy.png" mode=""></image>
              </view>
              <view class="">
              </view>
            </view>
            <view class="lableBoxS">
              <view style="background: rgba(221,227,249,0.6);">
                {{item.anchor_card.province}}{{item.anchor_card.city}}
              </view>
              <view style="background: rgba(202,229,189,0.6);" v-for="(item1,i1) in item.category_data" :key="i1">
                {{item1}}
              </view>
            </view>
            <view class="numbers">
              <view class="numberBox">
                <view class="lable">
                  粉丝
                </view>
                <view class="num">
                  {{item.anchor_card.fans_num}}
                </view>
              </view>
              <view class="numberBox" style="text-align: center;">
                <view class="lable">
                  内容力等级
                </view>
                <view class="num golden">
                  Lv{{item.anchor_card.content_level}}
                </view>
              </view>
              <view class="numberBox" style="text-align: right;">
                <view class="lable">
                  带货力等级
                </view>
                <view class="num golden">
                  Lv{{item.anchor_card.sales_level}}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 邀约的弹框 -->
    <u-popup class="collectPopup" bgColor="#F2F3F6" :show="twoShow" :round="10" closeable @close="twoShow = false">
      <view class="yYlist" style="height: 700rpx;overflow-y: scroll;">
        <view class="item" v-for="(item,i) in orderList" :key="i">
          <image v-if="item.order_state == '进行中'" class="stateImg" src="../../static/img/Slice 43.png"></image>
          <image v-if="item.order_state == '已完成'" class="stateImg" src="../../static/img/Slice 44.png"></image>
          <image v-if="item.order_state == '已取消'" class="stateImg" src="../../static/img/Slice 45.png"></image>
          <view class="itemContent">
            <view class="title">
              <view class="name">
                {{item.shop_name}}
              </view>
              <view class="money">
                <!-- <span>￥66</span>
              <span style="font-size: 24rpx;">/0.3%</span> -->
                <span style="font-size: 24rpx;">￥{{item.price}}</span>
              </view>
            </view>
            <view class="lableBoxS">
              <view v-if="item.city" style="background-color: #DDE3F9;">
                {{item.city_data}}
              </view>
              <view v-if="item.category_name" style="background-color: #FFDFC1;">
                {{item.category_name}}
              </view>
              <view v-if="item.content_type_name" style="background-color: #CAE5BD;">
                {{item.content_type_name}}
              </view>
            </view>
            <view class="time">
              截止：{{item.recruit_end_time}}
            </view>
            <view class="bottomBoxs">
              <view class="avatar">
                <image :src="item.avatar" mode=""></image>
              </view>
              <view class="userName" style="flex: 1;">
                {{item.nickname}}
              </view>
              <view class="btnS">
                <view class="btn" @click.stop="baom(item)">
                  邀约
                </view>
                <button class="btnNone" style="display: flex;align-items: top;" open-type="share" catchtap="share">
                  <image class="shareImg" src="../../static/img/Frame.png" mode=""></image>
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>

  </view>


</template>

<script>
  import tabbar from '@/components/tabbar/tabbar'
  import mpvueCityPicker1 from '../../components/mpvue-citypicker/mpvueCityPicker1.vue'
  export default {
    components: {
      tabbar,
      mpvueCityPicker1
    },
    data() {
      return {
        city: '城市',
        queryInfo: {
          city: '',
          fans_num: '',
          sales_level: '',
          content_level: '',
          category_id: '',
          content_type_id: '',
          state: '',
          gender: '',
          search_data: '',
        },
        orderList: [],
        screenShow: false,
        collectShow: false,
        twoShow: false,
        list: [],
        cardList: [],
        category_data: [],
        remunerate_type_data: [],
        content_data: [],
        chain_type_data: [],
        value: '',
        timeValue: '请选择探店时间',
        shopAddressValue: '请选择门店',
        gradeValue: '请选择',
        // 报名弹框
        applicationShow: false,
        timeShow: false,
        gradeShow: false,
        grade: [
          ['Lv1', 'Lv2', 'Lv3', 'Lv4', 'Lv5', 'Lv6', 'Lv7']
        ],
        state: [{
            id: '1',
            name: '已完成',
            flag: false
          },
          {
            id: '2',
            name: '已取消',
            flag: false
          }, {
            id: '3',
            name: '进行中',
            flag: false
          }, {
            id: '4',
            name: '已结束',
            flag: false
          },
        ],
        gender: [{
            id: 1,
            name: '男',
            flag: false
          },
          {
            id: 2,
            name: '女',
            flag: false
          }
        ],
        form: {

        },
        order_sn: '',
        my_card: {},
        receive_card: [],
        card_id: '',
        dy_nickname: '',
        confirm_join_info: {
          order_sn: '',
          card_id: '',
          time: '',
          store_id: '',
          sales_level: '',
          num: '',
          remark: ''
        },
        fans: [{
            id: 1,
            name: '0-1k',
            flag: false
          },
          {
            id: 2,
            name: '1-5k',
            flag: false
          }, {
            id: 3,
            name: '5K-1W',
            flag: false
          }, {
            id: 4,
            name: '1W-5W',
            flag: false
          }, {
            id: 5,
            name: '5W-10W',
            flag: false
          }, {
            id: 6,
            name: '10W-50W',
            flag: false
          }, {
            id: 7,
            name: '50W+',
            flag: false
          }
        ],
        dh: [{
            id: 0,
            name: 'Lv0',
            flag: false
          },
          {
            id: 1,
            name: 'Lv1',
            flag: false
          },
          {
            id: 2,
            name: 'Lv2',
            flag: false
          }, {
            id: 3,
            name: 'Lv3',
            flag: false
          }, {
            id: 4,
            name: 'Lv4',
            flag: false
          }, {
            id: 5,
            name: 'Lv5',
            flag: false
          }, {
            id: 6,
            name: 'Lv6',
            flag: false
          }, {
            id: 7,
            name: 'Lv7',
            flag: false
          }
        ],
        nr: [{
            id: 0,
            name: 'Lv0',
            flag: false
          },
          {
            id: 1,
            name: 'Lv1',
            flag: false
          },
          {
            id: 2,
            name: 'Lv2',
            flag: false
          }, {
            id: 3,
            name: 'Lv3',
            flag: false
          }, {
            id: 4,
            name: 'Lv4',
            flag: false
          }, {
            id: 5,
            name: 'Lv5',
            flag: false
          }, {
            id: 6,
            name: 'Lv6',
            flag: false
          }, {
            id: 7,
            name: 'Lv7',
            flag: false
          }
        ],
        zt: [{
            id: 1,
            name: '未邀约',
            flag: false
          },
          {
            id: 2,
            name: '已邀约',
            flag: false
          }
        ],
        loadingShow: false
      };
    },
    computed: {
      labelStyle() {
        return {
          fontSize: '24rpx',
        };
      }
    },
    onShow() {
      let that = this
      const shopAddress = uni.getStorageSync('name');
      this.confirm_join_info.store_id = uni.getStorageSync('store_id');
      if (!shopAddress) {
        this.shopAddressValue = '请选择门店'
      } else {
        this.shopAddressValue = shopAddress
      }
      // this.getIndex()
      // if (uni.getStorageSync('searchValue')) {
        that.queryInfo.search_data = uni.getStorageSync('searchValue')
        that.getIndex()
      // }
    },
    onLoad() {
      uni.setStorageSync('name', '')
      this.get_choose_data()
    },
    created() {
      uni.hideTabBar()
    },
    onReady() {

    },
    onPullDownRefresh() {
      let that = this
      that.queryInfo = {
          city: '',
          fans_num: '',
          sales_level: '',
          content_level: '',
          category_id: '',
          content_type_id: '',
          state: '',
          gender: '',
          search_data: '',
        },
        that.city = '城市'
      that.loadingShow = true
      uni.setStorageSync('searchValue',  that.queryInfo.search_data)
      that.getIndex()
      setTimeout(function() {
        uni.stopPullDownRefresh(); //停止下拉刷新动画
        that.loadingShow = false
      }, 1000);
    },
    methods: {
      goSearch() {
        uni.navigateTo({
          url: '/pages/search/search?value=' + this.queryInfo.search_data
        })
      },
      cardBtn(id, dy_nickname) {
        this.collectShow = false
        this.card_id = id
        this.confirm_join_info.card_id = id
        this.dy_nickname = dy_nickname
        this.applicationShow = true
      },
      async baom(item) {
        const obj = {
          order_sn: item.order_sn,
          id: item.card_id
        }
        const {
          data: res
        } = await uni.$http.post('anchor/invite_anchor', obj)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        } else {
          uni.showToast({
            title: '邀约成功',
            icon: 'success'
          });
          this.collectShow = false
        }

      },
      showCityTwo() {
        this.$refs.mpvueCityPickerTwo.show()
      },
      onConfirmTwo(e) {
        const arr = e.label.split("-")
        this.city = arr[1]
        this.queryInfo.city = arr[1]
        this.getIndex()
      },
      confirmFilter() {
        this.fans.forEach((item) => {
          if (item.flag == true) {
            this.queryInfo.fans_num = this.queryInfo.fans_num + item.id + ','
          }
        })
        this.queryInfo.fans_num = this.queryInfo.fans_num.substring(0, this.queryInfo.fans_num.lastIndexOf(','));
        this.dh.forEach((item) => {
          if (item.flag == true) {
            this.queryInfo.sales_level = item.id
          }
        })
        this.nr.forEach((item) => {
          if (item.flag == true) {
            this.queryInfo.content_level = item.id
          }
        })
        this.category_data.forEach((item) => {
          if (item.flag == true) {
            this.queryInfo.category_id = this.queryInfo.category_id + item.id + ','
          }
        })
        this.queryInfo.category_id = this.queryInfo.category_id.substring(0, this.queryInfo.category_id.lastIndexOf(
          ','));
        this.content_data.forEach((item) => {
          if (item.flag == true) {
            this.queryInfo.content_type_id = item.id
          }
        })
        this.gender.forEach((item) => {
          if (item.flag == true) {
            this.queryInfo.gender = item.id
          }
        })
        this.zt.forEach((item) => {
          if (item.flag == true) {
            this.queryInfo.state = item.id
          }
        })
        this.screenShow = false
        this.getIndex()
      },
      // 重置
      resetting() {
        this.fans.forEach((item) => {
          item.flag = false
        })
        this.dh.forEach((item) => {
          item.flag = false
        })
        this.nr.forEach((item) => {
          item.flag = false
        })
        this.category_data.forEach((item) => {
          item.flag = false
        })
        this.state.forEach((item) => {
          item.flag = false
        })
        this.content_data.forEach((item) => {
          item.flag = false
        })
        this.gender.forEach((item) => {
          item.flag = false
        })
        this.queryInfo = {
          city: this.queryInfo.city,
          fans_num: '',
          sales_level: '',
          content_level: '',
          category_id: '',
          content_type_id: '',
          state: '',
          gender: '',
          search_data: '',
        }
      },
      // 筛选框关闭
      screenClose() {
        this.screenShow = false
        this.resetting()
      },
      screenOpen() {
        this.resetting()
      },
      screenBtn(i, n) {
        if (n == 1) {
          this.dh.forEach((item) => {
            if (i.id == item.id) {
              i.flag = !i.flag
              console.log(i.flag);
            } else {
              item.flag = false
            }
          })
        } else {
          i.flag = !i.flag
        }
        if (n == 2) {
          this.nr.forEach((item) => {
            if (i.id == item.id) {
              i.flag = !i.flag
            } else {
              item.flag = false
            }
          })
        } else {
          i.flag = !i.flag
        }
        if (n == 3) {
          this.content_data.forEach((item) => {
            if (i.id == item.id) {
              i.flag = !i.flag
            } else {
              item.flag = false
            }
          })
        } else {
          i.flag = !i.flag
        }
        if (n == 4) {
          this.gender.forEach((item) => {
            if (i.id == item.id) {
              i.flag = !i.flag
            } else {
              item.flag = false
            }
          })
        } else {
          i.flag = !i.flag
        }
        if (n == 5) {
          this.zt.forEach((item) => {
            if (i.id == item.id) {
              i.flag = !i.flag
            } else {
              item.flag = false
            }
          })
        } else {
          i.flag = !i.flag
        }
      },
      // 获取筛选
      async get_choose_data() {
        const {
          data: res
        } = await uni.$http.post('index/get_choose_data', {
          type: 1
        })
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        res.data.category_data.forEach((item) => {
          item.flag = false
        })
        res.data.remunerate_type_data.forEach((item) => {
          item.flag = false
        })
        res.data.content_data.forEach((item) => {
          item.flag = false
        })
        res.data.chain_type_data.forEach((item) => {
          item.flag = false
        })
        this.category_data = res.data.category_data
        this.remunerate_type_data = res.data.remunerate_type_data
        this.content_data = res.data.content_data
        this.chain_type_data = res.data.chain_type_data
      },
      formatter(type, value) {
        if (type === 'year') {
          return `${value}年`
        }
        if (type === 'month') {
          return `${value}月`
        }
        if (type === 'day') {
          return `${value}日`
        }
        return value
      },
      // 跳转创建页面
      goAdd() {
        uni.navigateTo({
          url: '/pages/add/add'
        })
      },
      close() {
        this.applicationShow = false
        // console.log('close');
      },
      // 打开时间选择
      addTime() {
        this.applicationShow = false
        this.timeShow = true
      },
      // 关闭时间选择
      timeCancel() {
        this.applicationShow = true
        this.timeShow = false
      },
      // 确认时间
      async confirmTime(e) {
        this.timeShow = false
        this.applicationShow = true
        const timeFormat = uni.$u.timeFormat;
        let timeValue = await timeFormat(e.value, 'yyyy-mm-dd hh:MM');
        this.timeValue = timeValue
        this.confirm_join_info.time = timeValue
      },
      // 打开带货力等级
      addGrade() {
        this.applicationShow = false
        this.gradeShow = true
      },
      // 关闭带货力等级
      gradeCancel() {
        this.applicationShow = true
        this.gradeShow = false
      },
      // 确认带货力等级
      async confirmGrade(e) {
        this.gradeShow = false
        this.applicationShow = true
        this.gradeValue = e.value[0]
        if (this.gradeValue == 'Lv1') {
          this.confirm_join_info.sales_level = 1
        }
        if (this.gradeValue == 'Lv2') {
          this.confirm_join_info.sales_level = 2
        }
        if (this.gradeValue == 'Lv3') {
          this.confirm_join_info.sales_level = 3
        }
        if (this.gradeValue == 'Lv4') {
          this.confirm_join_info.sales_level = 4
        }
        if (this.gradeValue == 'Lv5') {
          this.confirm_join_info.sales_level = 5
        }
        if (this.gradeValue == 'Lv6') {
          this.confirm_join_info.sales_level = 6
        }
        if (this.gradeValue == 'Lv7') {
          this.confirm_join_info.sales_level = 7
        }
      },
      // 点击报名
      async application() {
        const {
          data: res
        } = await uni.$http.post('join_order/confirm_join', this.confirm_join_info)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        uni.showToast({
          title: '报名成功',
          icon: 'success '
        })
        this.applicationShow = false
      },
      cancelApplication() {
        this.applicationShow = false
        uni.showToast({
          title: '已取消报名',
          icon: 'none'
        })
      },
      // 跳转门店地址选择
      goShopAddress() {
        uni.navigateTo({
          url: '/pages/shopAddress/shopAddress?order_sn=' + this.order_sn
        })
      },
      // 跳转详情
      goDetail(id) {
        uni.navigateTo({
          url: '/pages/people/drxxxq?id=' + id
        })
      },
      async get_invite_order_list(card_id) {
        const {
          data: res
        } = await uni.$http.post('anchor/get_invite_order_list', {
          id: card_id
        })
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        if (res.data <= 0) {
          this.toast.msg('您还没有商单，请点击右下方创建商单。')
          this.twoShow = false
          return
        } 
        this.orderList = res.data
        this.twoShow = true
      },
      // 获取首页数据
      async getIndex() {
        const {
          data: res
        } = await uni.$http.post('anchor/get_anchor_list', this.queryInfo)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        this.list = res.data
      }
    }
  }
</script>

<style lang="scss">
  .content {
    min-height: 100vh;
    background-color: #F2F3F6;
    padding-bottom: 200rpx;
    padding-top: 278rpx;

    .tabbar {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 99;
    }

    .headerBox {
      box-sizing: border-box;
      padding-top: 108rpx;
      width: 100%;
      height: 278rpx;
      position: fixed;
      left: 0;
      top: 0;
      background: linear-gradient(200deg, #C6CBE1 0%, #FFFFFF 100%);
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      opacity: 1;

      .title {
        text-align: center;
        font-size: 34rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
      }

      .screenBox {
        position: relative;
        box-sizing: border-box;
        padding: 0 28rpx 0 56rpx;
        margin-top: 40rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;

        .arrow-down {
          margin-left: 8rpx;
          width: 16rpx;
          height: 16rpx;
        }

        .city {
          margin-right: 56rpx;
        }

        .ipt {
          position: absolute;
          right: 28rpx;
          top: 0;
          box-sizing: border-box;
          width: 338rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #F2F3F6;
          border-radius: 124rpx 124rpx 124rpx 124rpx;
          padding: 0 24rpx 0 32rpx;

          // view {
          //  height: 60rpx;
          //  line-height: 60rpx;
          //   color: rgba(0,0,0,0.4);
          // }
          input {
            height: 60rpx;
            line-height: 60rpx;
            padding-right: 80rpx;
            box-sizing: border-box;
          }

          image {
            position: absolute;
            top: 10rpx;
            right: 24rpx;
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }

    .list {
      .item {
        width: 686rpx;
        // height: 294rpx;
        padding-bottom: 26rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin: 24rpx auto;

        .stateImg {
          width: 92rpx;
          height: 36rpx;
        }


        .itemContent {
          padding: 22rpx 22rpx 0 24rpx;

          .title {
            display: flex;
            align-items: center;

            .name {
              flex: 1;
              width: 380rpx;
              font-size: 32rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #000000;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;

              image {
                display: inline-block;
                width: 24rpx;
                height: 24rpx;
                margin-left: 8rpx;
              }
            }

            .btns {

              display: flex;
              font-size: 24rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;

              .btn {
                width: 128rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background: #7D81A9;
                border-radius: 40rpx;
                margin-right: 16rpx;
              }

              .frame {
                width: 52rpx;
                height: 52rpx;

                image {
                  width: 52rpx;
                  height: 52rpx;
                }
              }
            }
          }

          .lableBoxS {
            display: flex;
            color: rgba(0, 0, 0, 0.6);
            font-size: 20rpx;
            margin-top: 16rpx;
            margin-bottom: 24rpx;
            font-weight: 400;

            view {
              height: 32rpx;
              line-height: 30rpx;
              padding: 4rpx 12rpx;
              margin-right: 8rpx;
            }
          }

          .numbers {
            display: flex;
            align-items: center;
            // flex-wrap: wrap;
            justify-content: space-between;

            .numberBox {
              // width: 33%;
              display: flex;
              align-items: center;
              text-align: center;
            }

            .lable {
              font-size: 24rpx;
              color: #6E7480;
            }

            .num {
              font-size: 32rpx;
              color: #000000;
            }

            .golden {
              font-size: 32rpx;
              color: #EAA04A;
            }
          }

          .bottomBox {
            display: flex;
            align-items: center;
            height: 52rpx;
            margin-top: 10rpx;

            .avatar {
              width: 44rpx;
              height: 44rpx;
              border-radius: 22rpx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .userId {
              font-size: 24rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              color: #6E7480;
              margin: 0 8rpx;

              .copyImg {
                width: 28rpx;
                height: 28rpx;
                margin-left: 8rpx;
              }
            }

            .btnS {
              display: flex;

              .btn {
                width: 128rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background: #7D81A9;
                border-radius: 40rpx;
                font-size: 24rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                margin-right: 16rpx;
              }

              .shareImg {
                width: 52rpx;
                height: 52rpx;
              }
            }
          }
        }
      }
    }


    .addBtnImg {
      position: fixed;
      bottom: 210rpx;
      right: 44rpx;
      width: 132rpx;
      height: 132rpx;
      z-index: 99;
    }

    // /deep/.applicationBox {
    //   /deep/.applicationContent{
    //      padding-left: 40rpx;
    //      /deep/.title {
    //        height: 100rpx;
    //        line-height: 100rpx;
    //        margin-left: 40rpx!important;
    //      }
    //   }


    .applicationContent {
      padding-left: 40rpx;

      .title {
        height: 100rpx;
        line-height: 100rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 600;
        color: #000000;
      }

      .u-form-item {
        height: 108rpx;
        // margin-right: 20rpx;
        padding-right: 20rpx;

        span {
          font-size: 28rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.4);
        }

        image {
          display: inline-block;
          vertical-align: middle;
          width: 42rpx;
          height: 42rpx;
        }
      }

      .applicationBtns {
        height: 162rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;

        view {
          width: 320rpx;
          height: 80rpx;
          line-height: 80rpx;
          border-radius: 40rpx;
          text-align: center;
        }

        .qxBtn {
          box-sizing: border-box;
          border: 2rpx solid rgba(125, 129, 169, 0.3);
          color: #7D81A9;
          margin-right: 22rpx;
        }

        .qrBtn {
          background: #7D81A9;
          color: #fff;
        }
      }
    }

    .screenContent {
      min-height: 100vh;
      padding: 30rpx;
      padding-right: 0;
      box-sizing: border-box;
      overflow: scroll;

      .itemBox {
        margin-bottom: 24rpx;

        .title {
          font-size: 32rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          margin-bottom: 32rpx;
        }

        .itemListBox {
          .item {
            display: inline-block;
            width: 156rpx;
            height: 64rpx;
            background: #F2F3F6;
            border-radius: 200rpx;
            margin-right: 22rpx;
            margin-bottom: 32rpx;
            font-size: 28rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            text-align: center;
            line-height: 64rpx;
          }

          .item:nth-child(4n) {
            margin-right: 0;
          }

          .itemBaoChou:nth-child(6) {
            font-size: 26rpx;
          }

          .active {
            background-color: #7D81A9;
            color: #FFFFFF;
          }
        }


      }

      .screenBtns {
        width: 662rpx;
        margin: 0 auto;
        margin-top: 40rpx;
        display: flex;
        margin-bottom: 50rpx;

        .btn {
          width: 320rpx;
          height: 80rpx;
          border-radius: 40rpx;
          text-align: center;
          line-height: 80rpx;
          font-size: 28rpx;
          color: #7D81A9;
          border: 2rpx solid rgba(125, 129, 169, 0.3);
          box-sizing: border-box;
          margin-right: 22rpx;
        }
      }
    }

    .cardlist {
      max-height: 1172rpx;
      background-color: #F2F3F6;
      margin-top: 120rpx;

      .item {
        width: 686rpx;
        height: 324rpx;
        padding-bottom: 26rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin: 24rpx auto;

        .itemContent {
          padding: 18rpx 22rpx 0 24rpx;

          .belong {
            font-size: 28rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.8);
          }

          .title {
            display: flex;
            align-items: center;
            margin-top: 24rpx;

            .name {
              flex: 1;
              width: 380rpx;
              font-size: 32rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 550;
              color: #000000;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;

              image {
                display: inline-block;
                width: 24rpx;
                height: 24rpx;
                margin-left: 8rpx;
              }
            }

            .btns {

              display: flex;
              font-size: 24rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;

              .btn {
                width: 128rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background: #7D81A9;
                border-radius: 40rpx;
                margin-right: 16rpx;
              }

              .frame {
                width: 52rpx;
                height: 52rpx;

                image {
                  width: 52rpx;
                  height: 52rpx;
                }
              }
            }
          }

          .lableBoxS {
            display: flex;
            color: rgba(0, 0, 0, 0.6);
            font-size: 20rpx;
            margin-top: 20rpx;
            margin-bottom: 18rpx;

            view {
              height: 32rpx;
              line-height: 32rpx;
              padding: 0 12rpx;
              margin-right: 8rpx;
            }
          }

          .numbers {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .numberBox {
              width: 33%;
              display: flex;
              align-items: center;
              text-align: center;
            }

            .lable {
              font-size: 24rpx;
              color: #6E7480;
            }

            .num {
              font-size: 32rpx;
              color: #000000;
            }

            .golden {
              font-size: 32rpx;
              color: #EAA04A;
            }
          }

          .userBox {
            display: flex;
            align-items: center;
            height: 52rpx;
            margin-top: 14rpx;

            .avatar {
              width: 44rpx;
              height: 44rpx;
              border-radius: 22rpx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .userId {
              font-size: 24rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              color: #6E7480;
              margin: 0 8rpx;

              .copyImg {
                width: 28rpx;
                height: 28rpx;
                margin-left: 8rpx;
              }
            }

            .btnS {
              display: flex;

              .btn {
                width: 128rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background: #7D81A9;
                border-radius: 40rpx;
                font-size: 24rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                margin-right: 16rpx;
              }

              .shareImg {
                width: 52rpx;
                height: 52rpx;
              }
            }
          }
        }
      }
    }

    .yYlist {
      padding: 50rpx 0;

      .item {
        width: 686rpx;
        height: 294rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin: 24rpx auto;

        .stateImg {
          width: 92rpx;
          height: 36rpx;
        }

        .itemContent {
          padding: 0 22rpx 0 24rpx;

          .title {
            display: flex;
            align-items: center;

            .name {
              width: 380rpx;
              font-size: 32rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #000000;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .money {
              flex: 1;
              text-align: right;
              color: #EAA04A;
              font-size: 36rpx;
            }
          }

          .lableBoxS {
            display: flex;
            color: rgba(0, 0, 0, 0.6);
            font-size: 20rpx;
            margin-top: 14rpx;
            margin-bottom: 18rpx;

            view {
              height: 32rpx;
              line-height: 32rpx;
              padding: 0 12rpx;
              border-radius: 22rpx;
              margin-right: 8rpx;
            }
          }

          .time {
            font-size: 24rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.6);
            margin-bottom: 24rpx;
          }

          .bottomBoxs {
            display: flex;
            align-items: center;
            height: 52rpx;

            .avatar {
              width: 36rpx;
              height: 36rpx;
              border-radius: 18rpx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .userName {
              font-size: 24rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              color: rgba(0, 0, 0, 0.6);
              margin: 0 8rpx;
            }

            .identityBoxS {
              flex: 1;
              display: flex;

              view {
                // width: 52rpx;
                height: 24rpx;
                padding: 0 8rpx;
                line-height: 22rpx;
                text-align: center;
                margin-right: 4rpx;
                background-color: #B0A5FF;
                color: #FFFFFF;
                font-size: 18rpx;
                border-radius: 10rpx 0 10rpx;
              }
            }

            .btnS {
              display: flex;

              .btn {
                width: 128rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background: #7D81A9;
                border-radius: 40rpx;
                font-size: 24rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                margin-right: 16rpx;
              }

              .shareImg {
                width: 52rpx;
                height: 52rpx;
              }
            }
          }
        }
      }

    }
  }
</style>